<template>
    <el-aside v-if="showAside" :width="asideWidth">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
                <router-link :to="item.path">{{ item.meta.title }}</router-link>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const asideWidth = ref('200px')
const showAside = ref(true)
const menuList = computed(() => router.getRoutes().filter((route) => route.meta && route.meta.aside))

// 定义 activePath 为响应式变量
const activePath = computed(() => route.path);
// 响应式布局，当屏幕宽度小于 992px 时隐藏 Aside 菜单
const isMobile = computed(() => window.innerWidth < 992)
watch(isMobile, (val) => {
    if (val) {
        asideWidth.value = '0'
        showAside.value = false
    } else {
        asideWidth.value = '200px'
        showAside.value = true
    }
})

// 监听路由变化，更新激活的菜单项
watch(() => route.path, (path) => {
    activePath.value = path
}, { immediate: true })

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>